<template>
	<div class="system-dic-dialog-container">
		<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="450px">
			<el-form ref="dicDialogFormRef" :model="state.ruleForm" size="default" label-width="90px">
				<el-row :gutter="35">
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="所属类型">
							<el-cascader
								:options="state.dictTypeData"
								:props="{ checkStrictly: true, emitPath: false, value: 'id', label: 'name' }"
								placeholder="请选择所属类型"
								clearable
								class="w100"
								v-model="state.ruleForm.dictTypeId"
							>
								<template #default="{ node, data }">
									<span>{{ data.name }}</span>
									<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
								</template>
							</el-cascader>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="字典名称">
							<el-input v-model="state.ruleForm.name" placeholder="请输入字典名称" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="字典值">
							<el-input v-model="state.ruleForm.value" placeholder="请输入字典值" clearable></el-input>
						</el-form-item>
					</el-col>
					<div style="padding-left: 20%;height:20px;padding-top:0%;vertical-align: middle;">
							选择标签类型和大小，可以实时查看效果
					</div>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="标签类型">
							<el-tag type="" @click="choiceTagType('')" class="cursor-pointer">标签一</el-tag>
							<el-tag type="success" @click="choiceTagType('success')" class="ml10 cursor-pointer" >标签二</el-tag>
							<el-tag type="info" @click="choiceTagType('info')" class="ml10 cursor-pointer" >标签三</el-tag>
							<el-tag type="warning" @click="choiceTagType('warning')" class="ml10 cursor-pointer" >标签四</el-tag>
							<el-tag type="danger" @click="choiceTagType('danger')" class="ml10 cursor-pointer" >标签五</el-tag>
						</el-form-item>
					</el-col>	
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="标签大小">
							<el-tag size="large" @click="choiceTagSize('large')" class="cursor-pointer">大型标签</el-tag>
							<!-- <el-tag @click="choiceTagSize('')" class="ml10 cursor-pointer">默认大小</el-tag> -->
							<el-tag size="default" @click="choiceTagSize('default')" class="ml10 cursor-pointer" >中等标签</el-tag>
							<el-tag size="small" @click="choiceTagSize('small')" class="ml10 cursor-pointer" >小型标签</el-tag>
						</el-form-item>
					</el-col>	
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="标签效果">
							<el-tag :size="state.ruleForm.tagSize" :type="state.ruleForm.tagType">{{state.ruleForm.name}}</el-tag>
						</el-form-item>
					</el-col>	
						
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
							<el-form-item label="排序">
								<el-input-number v-model="state.ruleForm.sortCode" placeholder="排序码：数字" class="w100" />
							</el-form-item>
						</el-col>							
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="字典描述">
							<el-input v-model="state.ruleForm.remark" type="textarea" placeholder="请输入字典描述" maxlength="150"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="default">取 消</el-button>
					<el-button type="primary" @click="onSubmit" size="default">{{ state.dialog.submitTxt }}</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="systemDicDialog">
import { reactive, ref } from 'vue';
import { DictDataUpdateInput, SysDictType } from '/@/api-services/models/system';
import dictDataApi from '/@/api-services/apis/system/dictDataApi';
import { feature } from '/@/utils/axios-utils';
import { ElMessage } from 'element-plus';
// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);

// 定义变量内容
const dicDialogFormRef = ref();
const state = reactive({
	ruleForm: {} as DictDataUpdateInput,	
	dictTypeData:[] as Array<SysDictType>,
	dialog: {
		isShowDialog: false,
		type: '',
		title: '',
		submitTxt: '',
	},
});

// 打开弹窗
const openDialog = (type: string, row: any,dictTypeData:Array<SysDictType>) => {	
	state.ruleForm = JSON.parse(JSON.stringify(row));
	state.dictTypeData = dictTypeData
	state.dialog.type=type;
	if (type === 'edit') {		
		state.dialog.title = '修改字典';
		state.dialog.submitTxt = '修 改';
	} else {
		state.dialog.title = '新增字典';
		state.dialog.submitTxt = '新 增';
	}
	state.dialog.isShowDialog = true;
};
// 关闭弹窗
const closeDialog = () => {
	state.dialog.isShowDialog = false;
};
// 取消
const onCancel = () => {
	closeDialog();
};
// 提交
const onSubmit = async () => {
	var err:Error|null
	if (state.dialog.type === 'add') {
        [err]=await feature(dictDataApi.add(state.ruleForm))
     }
     else{
        [err]=await feature(dictDataApi.update(state.ruleForm))
     }
     if(err){
        ElMessage.error(err.message)
     }
     else{
        closeDialog();
        emit('refresh');
     }
	closeDialog();
	emit('refresh');
	// if (state.dialog.type === 'add') { }
};

const choiceTagType=(type:string)=>{
	state.ruleForm.tagType=type;
}
const choiceTagSize=(size:string)=>{
	state.ruleForm.tagSize=size;
}
// 暴露变量
defineExpose({
	openDialog,
});
</script>
<style scoped lang="scss">
span{
	.el-tag{
	padding: 5px;
 }
}
 
</style>
